 /*
 * @description: 掌大客服设置入口
 * @Author: along
 * @Date: 2020-09-27
 * @Last Modified by: along
 * @Last Modified time: 2020-09-27
 */
<template>
    <div class="container customSetting">
        <div :style="{flex: '1'}">
            <!-- title -->
            <div class="wrap-title">
                客服设置
            </div>

            <!-- tab -->
            <el-tabs v-model="TYPE">
                <el-tab-pane
                    label="排期设置"
                    name="1"
                />
                <el-tab-pane
                    label="资料设置"
                    name="2"
                />
            </el-tabs>

            <!-- setting -->
            <custom-date
                v-if="TYPE == '1'"
                :no="no"
            />
            <custom-info
                v-if="TYPE == '2'"
                :no="no"
            />
        </div>
    </div>
</template>

<script>
import customDate from '@/components/custom/custom-date.vue';
import customInfo from '@/components/custom/custom-info.vue';
export default {
    components: {
        customDate,
        customInfo
    },
    data () {
        return {
            TYPE: '1',
            no: '',
            authResult: {}
        };
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 页面数据初始化
         */
        init () {
            this.authResult = this.$route.meta.authResult;
            this.no = this.$route.query.no ? this.$route.query.no : '';
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    background-color: #fff;
    padding: 32px 32px 5px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 12px;
    overflow: hidden;
    overflow-y: auto;
    .wrap-title {
        color: #333333;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        cursor: pointer;
        margin-bottom: 20px;
        .el-icon-hand-bangzhu {
            font-size: 15px;
            color: #666666;
            margin-left: 8px;
        }
    }
    .cursor-font {
        color: #20A0FF;
        cursor: pointer;
    }
}
</style>

<style lang="less">
.customSetting {
    .el-tabs__nav {
        .el-tabs__item {
            color: #999999;
        }
        .is-active {
            font-weight: 500;
            color: #20A0FF;
        }
    }
    .el-tabs__nav-wrap::after {
        background-color: #EBEEF5;
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .table-button .el-button {
        padding: 4px 0;
        margin-left: 0;
    }
}
.reception-poper {
    color: #666666;
    line-height: 20px;
    font-size: 13px;
    padding: 16px;
}
</style>